<template>
    <div class="change-pwd">
    <div class="dialog">
      <div class="title">
        <span class="txt">修改密码</span>
        <span class="close" @click="close">×</span>
        <!--爷爷的closeChangePwd()-->
      </div>
      <div class="content">
        <div class="row">
          <span class="label">旧密码</span>:
          <input type="password"/>
        </div>
        <div class="row">
          <span class="label">密码</span>:
          <input type="password" />
        </div>
        <div class="row">
          <span class="label">确认密码</span>:
          <input type="password" />
        </div>
      </div>
      <div class="btns">
        <button @click="changePwd">修改密码</button>
        <button @click="close">取消</button>
      </div>
   </div>
  </div>
</template>
<script>
export default {
  props:[ "close" ],
  methods:{
    changePwd(){
      alert("密码修改成功!");
    }
  }
}
</script>
<style lang="scss">
.change-pwd{
  background-color:rgba(0,0,0,.5);
  position:fixed;
  top:0; bottom:0; left:0; right:0;
  .dialog{
    background-color:#fff;
    width:300px;
    border:1px solid #aaa;
    transform:translate(-50%,-50%);
    position:absolute;
    top:50%;
    left:50%;
    >.title{
      height:36px;
      background-color:#e4393c;
      color:#fff;
      line-height:36px;
      >.txt{
        margin-left:10px;
      }
      >.close{
        float:right;
        cursor:pointer;
        margin-right:10px;
        &:hover{
          font-size:1.2em;
        }
      }
    }
    >.content{
      >.row{
        margin:5px 10px;
        >.label{
          display:inline-block;
          width:80px;
          text-align:right;
        }
      }
    }
    >.btns{
      text-align:center;
      border-top:1px solid #ccc;
      height:36px;
      line-height:36px;
      >button{
        margin-right:20px;
      }
    }
  }
}
</style>